<template>
  <el-card style="width: 1200px; margin: 0 auto" shadow="always">
    <el-form :model="spuForm">
      <el-form-item label="SPU名称" label-width="80px">
        <span>操作</span>
      </el-form-item>
      <el-form-item label="SKU名称" label-width="80px">
        <el-input placeholder="SKU名称" v-model="spuForm.skuName"></el-input>
      </el-form-item>
      <el-form-item label="价格(元)" label-width="80px">
        <el-input-number
          v-model="spuForm.price"
          controls-position="right"
          :min="1"
          :max="10"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="重量(千克)" label-width="80px">
        <el-input-number
          v-model="spuForm.weight"
          controls-position="right"
          :min="1"
          :max="10"
        ></el-input-number>
      </el-form-item>
      <el-form-item label="规格描述" label-width="80px">
        <el-input
          type="textarea"
          placeholder="规格描述"
          v-model="spuForm.skuDesc"
        ></el-input>
      </el-form-item>
      <el-form-item label="平台属性" label-width="80px">
        <el-form inline>
          <el-form-item
            v-for="(attr, index) in attrInfoList"
            :label="attr.attrName"
            :key="attr.id"
            label-width="80px"
            style="margin-top: 10px"
          >
            <el-select placeholder="请选择" v-model="skuAttrValueList[index]">
              <el-option
                v-for="attrval in attr.attrValueList"
                :key="attrval.id"
                :label="attrval.valueName"
                :value="`${attrval.id}:${attrval.attrId}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="销售属性" label-width="80px">
        <el-form inline>
          <el-form-item
            v-for="(spusaleattr, index) in spuSaleAttrList"
            :label="spusaleattr.saleAttrName"
            :key="spusaleattr.id"
            label-width="80px"
            style="margin-top: 10px"
          >
            <el-select
              placeholder="请选择"
              v-model="skuSaleAttrValueList[index]"
            >
              <el-option
                v-for="saleattrval in spusaleattr.spuSaleAttrValueList"
                :key="saleattrval.id"
                :label="saleattrval.saleAttrValueName"
                :value="`${saleattrval.id}:${saleattrval.spuId}`"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </el-form-item>
      <el-form-item label="图片列表" label-width="80px">
        <el-table
          :data="spuImageList"
          border
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" />
          <el-table-column label="图片">
            <template v-slot="{ row }">
              <img :src="row.imgUrl" alt="" />
            </template>
          </el-table-column>
          <el-table-column label="名称">
            <template v-slot="{ row }">
              {{ row.imgName }}
            </template>
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="primary"
                v-if="skuDefaultImg !== row.imgUrl"
                size="small"
                @click="setDefault(row)"
                >设为默认</el-button
              >
              <el-tag type="success" v-else>默认图片</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="SaveSkuInfo">保存</el-button>
        <el-button @click="backSpuListPage">取消</el-button>
      </el-form-item>
    </el-form>
  </el-card>
</template>

<script>
import { SaveSkuInfoApi } from '@/api/SPUApi'
import { mapState } from 'vuex'
export default {
  name: 'AddSku',
  data() {
    return {
      spuForm: {
        skuName: '',
        price: '',
        weight: '',
        skuDesc: ''
      },
      skuAttrValueList: [],
      skuSaleAttrValueList: [],
      skuDefaultImg: '',
      skuImageList: []
    }
  },
  methods: {
    setDefault(row) {
      this.skuDefaultImg = row.imgUrl
    },
    handleSelectionChange(val) {
      this.skuImageList = [...val]
    },
    backSpuListPage() {
      this.$emit('SwitchAddorUpdate', '1')
    },
    async SaveSkuInfo() {
      const res = await SaveSkuInfoApi({
        ...this.spuForm,
        category3Id: this.$store.state.sortStore.Category3Id,
        skuDefaultImg: this.skuDefaultImg,
        skuImageList: this.skuImageList.map((item) => {
          return {
            imgName: item.imgName,
            imgUrl: item.imgUrl,
            isDefault: item.isDefault,
            spuImgId: item.spuId
          }
        }),
        skuAttrValueList: this.skuAttrValueList.map((item) => {
          const str = item.split(':')
          return {
            attrId: str[1],
            valueId: str[0]
          }
        }),
        skuSaleAttrValueList: this.skuSaleAttrValueList.map((item) => {
          const str = item.split(':')
          return {
            saleAttrValueId: str[0]
          }
        })
      })
      if (res.code === 200) {
        this.backSpuListPage()
        this.$message.success('添加SKU成功')
      }
    }
  },
  computed: {
    ...mapState('spuStore', ['spuImageList', 'spuSaleAttrList', 'attrInfoList'])
  }
}
</script>

<style lang="less" scoped></style>
